<template>
  <div class="entrance">
    <div>
      <Title title="快速入口" pinyin="KUAI SU RU KOU"/>
      <!--      <div class="honor-list">-->
      <!--        <vue-seamless-scroll-->
      <!--            :data="ksrk"-->
      <!--            :class-option="classOption"-->
      <!--            class="warp"-->
      <!--        >-->
      <!--          <ul class="ul-item">-->
      <!--            <li class="li-item" v-for="(item) in ksrk" :key="item.id">-->
      <!--              <div @mouseenter="mouseEnter" @mouseleave="mouseLeave" @click="handleRouter(item)">-->
      <!--                {{ item.name }}-->
      <!--              </div>-->
      <!--            </li>-->
      <!--          </ul>-->
      <!--        </vue-seamless-scroll>-->
      <!--      </div>-->
      <div class="marquee">
        <div class="marquee-width" ref="themeRef">
          <el-row :gutter="24">
            <el-col :span="6" v-for="item in ksrk" :key="item.id">
              <div class="marquee-content" :style="themeHeight" @click="handleRouter(item)">
                <div style="width: 100%;display: flex;flex-direction: row-reverse;padding-top: 8px">
                  <div class="c"></div>
                </div>
                {{ item.name }}
                <div style="width: 100%;display: flex;padding-bottom: 8px">
                  <div class="p"></div>
                </div>
              </div>
            </el-col>
          </el-row>
          <!--          <marquee-text :duration="100" :repeat="3" :paused="paused">-->
          <!--            <div class="marquee-box">-->
          <!--              <div class="marquee-content" v-for="item in ksrk" :key="item.id" @click="handleRouter(item)"-->
          <!--                   @mouseenter="mouseEnter"-->
          <!--                   @mouseleave="mouseLeave">-->
          <!--                {{ item.name }}-->

          <!--              </div>-->

          <!--            </div>-->
          <!--          </marquee-text>-->
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import Title from "@/components/Title.vue";
// import vueSeamlessScroll from 'vue-seamless-scroll'
import { getQuickListApi } from "@/api/home";
// import Icon from '@/assets/img/p.svg'
// import MarqueeText from "vue-marquee-text-component";


export default {
  components: {Title},
  data() {
    return {
      paused: false,
      classOption: {
        limitMoveNum: 1,
        direction: 2,
        step: 0.3
      },
      ksrk: [],
      themeHeight: ''
    }
  },
  mounted() {
    this.init()
    this.themeHeight = `height: ${ (this.$refs.themeRef.offsetWidth / 4) * 0.4 }px`
  },
  methods: {
    async init() {
      this.ksrk = await getQuickListApi()
      // console.log('this',this.ksrk)
    },
    mouseEnter() {
      this.paused = true
    },
    mouseLeave() {
      this.paused = false
    },
    handleRouter(item) {
      const url = item.href
      if (item.code === 'GZZD') {
        const {href} = this.$router.resolve({
          path: `/more`,
          query: {
            id: item.id,
            code: item.code
          }
        });
        window.open(href, '_blank');
      } else {
        // if(url){
        //   if(!url.includes('//:')){
        //     const {href} = this.$router.resolve({
        //       path: '/mailbox'
        //     });
        //     window.open(href, '_blank');
        //   }else{
        //     window.open(url, '_blank');
        //   }
        // }
        window.open(url, '_blank');
      }
    }
  }
}
</script>

<style lang="less" scoped>
.entrance {
  width: 100%;
  //margin-top: 12px;
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

.entrance-content {
  //width: 1200px;
  //margin-bottom: 12px;
}

.entrance-box {
  height: 104px;
  background: #237CBE;
}

/deep/ .el-carousel__indicators {
  display: none;
}

.marquee {
  //padding: 0 12px;
  //background: #4E5969;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  //margin-bottom: 40px;

  .marquee-b {
    width: 1200px;
    display: flex;
    flex-direction: column;

    .marquee-box {
      display: flex;


    }
  }

  @media screen and (min-width: 1300px) {
    .marquee-width {
      width: 1200px;
    }
  }

  @media screen and (min-width: 1800px) {
    .marquee-width {
      width: 1400px;
    }
  }

  @media screen and (min-width: 2000px) {
    .marquee-width {
      width: 1920px;
    }
  }

  .marquee-content {
    //height: 120px;
    //width: 100%;
    //height: 100%;
    //background: ;
    background: #237CBE;
    //background: url('~@/assets/img/img_2.png');
    //background-position: center center;
    //background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
    color: #fff;
    text-align: center;
    //align-items: center;
    font-size: 24px;
    //align-items: center;
    //line-height: 100px;
    //border: 1px solid #000;
    margin: 0 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    //align-items: center;
    //justify-content: center;
    //background: linear-gradient(#237CBE, #F9F9F9);
  }

  .p {
    width: 32px;
    height: 32px;
    margin-left: 12px;
    background-image: url(~@/assets/img/p2.svg); // 当成背景引入
  }

  .c {
    width: 32px;
    height: 32px;
    margin-right: 12px;
    //background-image: url(~@/assets/img/p2.svg); // 当成背景引入
  }
}

</style>
